<!--
 * @Author: 颜礼田 2564217790@qq.com
 * @Date: 2024-08-26 10:41:26
 * @LastEditors: MrDotYan 2564217790@qq.com
 * @LastEditTime: 2024-09-23 14:33:51
 * @FilePath: /turo-repo-enterprise/apps/fuck-enterprise-admin/src/views/system/menuMange/index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="table-box">
    <ProTable ref="proTable" title="菜单列表" row-key="path" :indent="20" :columns="columns" :data="menuData">
      <!-- 表格 header 按钮 -->
      <template #tableHeader>
        <el-button type="primary" v-auth="'System.Menus.AddMenus'" :icon="CirclePlus" @click="open">新增菜单 </el-button>
      </template>
      <!-- 菜单图标 -->
      <template #icon="{ row }">
        <el-icon :size="18">
          <component :is="row.meta.icon"></component>
        </el-icon>
      </template>
      <!-- 菜单操作 -->
      <template #operation="{ row }">
        <el-button type="primary" link v-auth="'System.Menus.EditMenus'" :icon="EditPen" @click="edit(row)"> 编辑 </el-button>
        <el-button type="danger" link v-auth="'System.Menus.RemoveMenus'" :icon="Delete" @click="remove(row)"> 删除 </el-button>
      </template>
    </ProTable>

    <EditDrawer ref="editDrawerRef"></EditDrawer>
  </div>
</template>

<script setup lang="ts" name="menuMange">
import { ref } from "vue";
import { ColumnProps } from "@/components/ProTable/interface";
import { Delete, EditPen, CirclePlus } from "@element-plus/icons-vue";
import ProTable from "@/components/ProTable/index.vue";
import { useAuthStore } from "@/stores/modules/auth";

import EditDrawer from "./components/edit.vue";
import { ElMessageBox, ElNotification } from "element-plus";
import { removeMenus } from "@/api/modules/menus";
import { ResultEnum } from "@/enums/httpEnum";

const proTable = ref();

const authStore = useAuthStore();
const menuData = ref(authStore.authMenuList);

const editDrawerRef = ref();

function open() {
  editDrawerRef.value?.open();
}

function edit(row) {
  editDrawerRef.value?.open(row);
}

// 表格配置项
const columns: ColumnProps[] = [
  { prop: "meta.title", label: "菜单名称", align: "left" },
  { prop: "meta.icon", label: "菜单图标" },
  { prop: "name", label: "菜单 name" },
  { prop: "path", label: "菜单路径", width: 300 },
  { prop: "component", label: "组件路径", width: 300 },
  { prop: "operation", label: "操作", width: 250, fixed: "right" }
];

function remove(row) {
  ElMessageBox.confirm("提示", { type: "error", message: "是否删除当前数据？" })
    .then(() => {
      if (row?.id) {
        removeMenus({ id: row.id }).then(r => {
          const { code, message } = r;
          if (code == ResultEnum.SUCCESS) {
            ElNotification.success("删除成功！");
            authStore.getAuthMenuList();
          } else {
            ElNotification.error(message);
          }
        });
      }
    })
    .catch(err => {
      console.error(err);
    });
}
</script>
